<template>
	<view class="wrap">
		<u-gap height="20" bg-color="#f5f5f5"></u-gap>
		<u-form class="task-form-field" :model="form" :rules="rules" ref="uForm">
			<u-form-item label="服务器地址" label-width="100px">
				<u-input v-model="form.baseUrl" placeholder="请输入服务器地址"></u-input>
			</u-form-item>
		</u-form>
		<view class="form-footer">
			<u-button class="btn" type="primary" @click="submit">保存</u-button>
			<u-button class="btn" type="default" @click="reset">重置</u-button>
		</view>
	</view>
</template>

<script>
import config from '@/common/config.js'
import storeSer from '@/api/service/store-service.js'

export default {
	data() {
		return {
			form: {
				baseUrl: ''
			},
			rules: {
				baseUrl: [
					{
						required: true,
						message: '请输入服务器地址',
						trigger: ['change', 'blur'],
					}
				]
			}
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
		Promise.resolve(storeSer.getBaseUrl()).then(value => {
			this.form.baseUrl = value || config.baseUrl
		})
	},
	methods: {
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					let baseUrl = String(this.form.baseUrl).trim()
					// 与默认相同则清空自定义的
					if (baseUrl === config.baseUrl) {
						storeSer.setBaseUrl('')
					} else {
						storeSer.setBaseUrl(baseUrl)
					}
				}
			})
		},
		reset() {
			this.form.baseUrl = config.baseUrl
		}
	}
};
</script>
<style lang="scss">
page {
  background: #f5f5f5;
}
.u-form {
  background: #fff;
  padding: 0 15px;
}
.remind-text {
	padding: 20rpx 30rpx;
	color: #666666;
}
</style>
